<!-- src/components/HeaderBar.vue -->
<template>
  <div class="header-bar">
    <van-icon name="arrow-left" @click="goBack" />
    <div class="title">{{ title }}</div>
    <!-- <van-icon name="ellipsis" @click="openMenu" /> -->
  </div>
</template>

<script>
export default {
  name: "HeaderBar",
  props: {
    title: {
      type: String,
      default: "页面标题",
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    openMenu() {
      // 打开菜单的逻辑
      console.log("打开菜单");
    },
  },
};
</script>

<style lang="less" scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 42px;
  height: 120px;
  line-height: 120px;
}

.title {
  flex: 1;
  text-align: center;
  //   font-weight: 600;
  font-size: 36px;
}

.van-icon {
  font-size: 30px;
}
</style>
